<!--
 * @Descripttion: 会员详情
 * @Author: xiao li
 * @Date: 2020-07-06 12:17:07
 * @LastEditors: xiao li
 * @LastEditTime: 2021-04-29 18:08:04
-->
<template>
  <div>
    <top-nav :isBack="true"></top-nav>
    <div class="page-main">
      <div class="flex-y-center c-title pt-lg pb-lg">
        <i class="iconfont iconbiaoshi mr-sm"></i>基本信息
      </div>
      <div class="flex-center">
        <div class="user-info flex-center fill-table-bg" style="width: 250px">
          <div>
            <img class="avatar flex-center" :src="user_info.avatarUrl" />
            <div class="f-paragraph c-paragraph text-center text-bold mt-md">
              {{ user_info.nickName }}
            </div>
          </div>
        </div>
        <div class="flex-1 item-child border-top">
          <div class="flex-center">
            <div class="fill-table-bg">用户ID</div>
            <div class="flex-1">{{ user_info.user_id }}</div>
          </div>
          <div class="flex-center">
            <div class="fill-table-bg">用户昵称</div>
            <div class="flex-1">{{ user_info.nickName }}</div>
          </div>
          <div class="flex-center">
            <div class="fill-table-bg">手机号码</div>
            <div class="flex-1">{{ user_info.member_phone || '-' }}</div>
          </div>
          <div class="flex-center">
            <div class="fill-table-bg">会员卡号</div>
            <div class="flex-1">{{ user_info.id }}</div>
          </div>
          <div class="flex-center">
            <div class="fill-table-bg">会员等级</div>
            <div class="flex-1">{{ user_info.level_content }}</div>
          </div>
          <div class="flex-center">
            <div class="fill-table-bg">成为会员时间</div>
            <div class="flex-1">{{ user_info.create_time | handleTime }}</div>
          </div>
          <div class="flex-center">
            <div class="fill-table-bg">会员有效期</div>
            <div class="flex-1">
              <div
                v-if="
                  user_info.level_top === 999 && user_info.over_time * 1 > 0
                "
              >
                {{ user_info.over_time | handleTime }}
              </div>
              <div v-else>终生有效</div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex-y-center c-title pt-lg pb-lg">
        <i class="iconfont iconbiaoshi mr-sm"></i>统计信息
      </div>

      <el-table
        :data="form_list"
        :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
        style="width: 100%"
      >
        <el-table-column prop="price" label="消费总金额"> </el-table-column>
        <el-table-column prop="order_num" label="订单总数量"> </el-table-column>
        <el-table-column prop="integral" label="可用积分"> </el-table-column>
        <el-table-column prop="growth" label="当前成长值"> </el-table-column>
        <el-table-column prop="stored" label="储值金额"> </el-table-column>
        <!-- <el-table-column
                  prop="stored"
                  label="累计佣金">
                </el-table-column> -->
        <!-- <el-table-column
                  prop="title"
                  label="累计成长值">
                </el-table-column>
                <el-table-column
                  prop="title"
                  label="可提现佣金">
                </el-table-column> -->
      </el-table>

      <el-button
        @click="toChange(1)"
        :type="currInd === 1 ? 'primary' : ''"
        plain
        >成长值明细</el-button
      >
      <el-button
        @click="toChange(2)"
        :type="currInd === 2 ? 'primary' : ''"
        plain
        >积分明细</el-button
      >
      <el-button
        @click="toChange(3)"
        :type="currInd === 3 ? 'primary' : ''"
        plain
        >储值明细</el-button
      >
      <div class="space-lg"></div>

      <el-table
        v-loading="loading"
        :data="tableCount"
        :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
        style="width: 100%"
        v-show="currInd < 3"
      >
        <el-table-column prop="id" label="编号" width="200"> </el-table-column>
        <el-table-column prop="controller_name" label="操作者" width="200">
          <template slot-scope="scope">
            <span>{{ scope.row.controller_name || '系统管理员' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="操作日期" width="200">
          <template slot-scope="scope">
            <span>{{ scope.row.create_time | handleTime }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="text" label="操作记录">
          <template slot-scope="scope">
            <span
              :class="[
                scope.row.controller_type === 1 ? 'c-warning' : 'c-success'
              ]"
              >{{ scope.row.text }}</span
            >
          </template>
        </el-table-column>
      </el-table>

      <el-table
        v-loading="loading"
        :data="tableCount"
        :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
        style="width: 100%"
        v-show="currInd === 3"
      >
        <el-table-column prop="id" label="编号" width="200"> </el-table-column>
        <el-table-column prop="controller_name" label="操作者" width="200">
          <template slot-scope="scope">
            <span>{{ scope.row.controller_name || '系统管理员' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="操作日期" width="200">
          <template slot-scope="scope">
            <span>{{ scope.row.create_time }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="text" label="备注" width="200">
        </el-table-column>
        <el-table-column prop="text" label="交易记录">
          <template slot-scope="scope">
            <span
              :class="[
                scope.row.controller_type === 1 || !scope.row.stored_id
                  ? 'c-warning'
                  : 'c-success'
              ]"
              >{{ scope.row.admin_text }}</span
            >
          </template>
        </el-table-column>
      </el-table>

      <lb-page
        :batch="false"
        :page="searchForm[currInd].page"
        :pageSize="searchForm[currInd].limit"
        :total="total[currInd]"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      >
      </lb-page>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // type:1成长值；2积分
      searchForm: {
        1: {
          page: 1,
          limit: 10,
          type: 1
        },
        2: {
          page: 1,
          limit: 10,
          type: 2
        },
        3: {
          page: 1,
          limit: 10,
          type: 3
        }
      },
      total: {
        1: 1,
        2: 1,
        3: 1
      },
      currInd: 1,
      id: 0,
      loading: false,
      user_info: {},
      form_list: [],
      tableCount: [{
        title: 'xxxxx'
      }]
    }
  },
  async created () {
    let { id } = this.$route.query
    this.id = id
    await this.getTableDataList()
  },
  methods: {
    toChange (key) {
      this.currInd = key
      this.searchForm[key].page = 1
      this.tableCount = []
      this.getTableDataList()
    },
    async getTableDataList () {
      this.loading = true
      let { id } = this
      let param = this.searchForm[this.currInd]
      param.id = id
      let { code, data } = await this.$api.memberMemberInfo(param)
      this.loading = false
      if (code !== 200) return
      this.user_info = data.user_info
      this.form_list = [data.form_list]
      this.tableCount = data.data_list.data
      this.total[this.currInd] = data.data_list.total
    },
    handleSizeChange (val) {
      this.searchForm[this.currInd].limit = val
      this.handleCurrentChange(1)
    },
    handleCurrentChange (val) {
      this.searchForm[this.currInd].page = val
      this.getTableDataList()
    }
  },
  filters: {
    handleTime (val, type) {
      let time = type === 1 ? moment(val * 1000).format('YYYY-MM-DD') : type === 2 ? moment(val * 1000).format('HH:mm:ss') : moment(val * 1000).format('YYYY-MM-DD HH:mm:ss')
      return time
    }
  }
}
</script>

<style lang="scss" scoped>
.border-top {
  border-top: 1px solid #ebeef5;
}
.fill-table-bg {
  width: 200px;
  background: rgb(245, 247, 250);
}
.user-info {
  height: 337px;
  border: 1px solid #ebeef5;
  .avatar {
    width: 120px;
    height: 120px;
  }
}
.item-child {
  .flex-center {
    .fill-table-bg,
    .flex-1 {
      padding: 0 20px;
      height: 48px;
      line-height: 48px;
      border-right: 1px solid #ebeef5;
      border-bottom: 1px solid #ebeef5;
    }
    .fill-table-bg {
      text-align: right;
    }
  }
}
</style>
